<template>
  <el-dialog title="发送设置" :visible.sync="show" custom-class="dialog_push" @open="handleOpen">
    <h4>发送对象</h4>
    <div v-for="item,n in conditions" class="condition">
      <conditionItem ref="newsend" :condition="item">
      </conditionItem>
      <i class="el-icon-plus" @click="handleAddCondition"></i>
      <i v-if="conditions.length !== 1" class="el-icon-minus" @click="handleDelCondition(n)"></i>
    </div>
    <h4>发送时间</h4>
    <el-date-picker
      v-model="sendTime"
      type="datetime"
      format="yyyy-MM-dd HH:mm:ss"
      placeholder="选择日期时间">
    </el-date-picker>
    <h4>发送记录</h4>
    <el-table v-loading="loading" element-loading-text="拼命加载中" :data="wePageSendPlan.list" stripe height="200">
      <el-table-column label="发送时间">
        <template slot-scope="scope">
          {{dateFormat(scope.row.sendTime)}}
        </template>
      </el-table-column>
      <el-table-column label="发送方式">
        <template slot-scope="scope">
          {{scope.row.sendType==1?'立即发送':'定时发送'}}
        </template>
      </el-table-column>
      <el-table-column label="发送状态">
        <template slot-scope="scope">
          {{scope.row.sendStatus==0?'未发送':'已发送'}}
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      small
      layout="prev, pager, next"
      :current-page.sync="page"
      @current-change="getSendPlan"
      :total="wePageSendPlan.page.total">
    </el-pagination>
    <div slot="footer">
      <el-button type="primary" @click="handleSend(true)">立即发送</el-button>
      <el-button type="primary" @click="handleSend(false)">定时发送</el-button>
    </div>
  </el-dialog>  
</template>
<script>
  import {mapActions, mapState} from 'vuex'
  import conditionItem from '@/components/common/content/wxSendCondition'
  export default {
    components: {conditionItem},
    props: ['id'],
    data () {
      return {
        conditions: [{appid: null, tagId: null}],
        sendTime: null,
        show: false,
        loading: false,
        page: 1,
        size: 10
      }
    },
    computed: {
      ...mapState({
        wePageSendPlan: state => state.contentManage.wePageSendPlan
      })
    },
    methods: {
      ...mapActions(['addWePageSendPlan', 'getWePageSendPlan']),
      // 日期格式化
      dateFormat (date) {
        return this.$date.format(new Date(date), 'YYYY-MM-DD HH:mm:ss')
      },
      // 添加发送条件
      handleAddCondition () {
        this.conditions.push({appid: null, tagId: null})
      },
      // 删除发送条件
      handleDelCondition (index) {
        this.conditions.splice(index, 1)
      },
      handleOpen () {
        this.conditions = [{appid: null, tagId: null}]
        this.sendTime = null
        this.getSendPlan()
      },
      // 获取发送计划
      async getSendPlan () {
        this.loading = true
        await this.getWePageSendPlan({
          logicId: this.id,
          page: this.page,
          size: this.size
        })
        this.loading = false
      },
      // 发送
      async handleSend (ifSendNow) {
        if (!this.submitCheck(ifSendNow)) {
          return false
        }
        const res = await this.addWePageSendPlan({
          logicId: this.id,
          sendTime: this.sendTime && this.$date.format(new Date(this.sendTime), 'YYYY-MM-DD HH:mm:ss'),
          conditions: this.conditions
        })
        if (res.data.code === 1) {
          this.$message.success('发送计划添加成功')
          this.show = false
        }
      },
      // 数据检测
      submitCheck (ifSendNow) {
        if (this.conditions.length === 1 && !this.conditions[0].tagId) {
          this.$message.warning('请选择发送对象')
          return false
        }
        if (!ifSendNow && !this.sendTime) {
          this.$message.warning('请输入发送时间')
          return false
        }
        return true
      }
    }
  }
</script>
<style lang="scss">
  .dialog_push{
    h4{margin:12px 0 10px 0;}
    .conditionItem{display:inline-block;}
    .el-pagination{margin-top:10px;text-align:right}
  }
</style>
